<script setup>

import {ArrowUp, Plus, Close, More, DArrowLeft, CircleCloseFilled} from "@element-plus/icons-vue";
import {
    defineProps,
    defineEmits,
    ref,
    reactive,
    computed,
    defineExpose,
    inject,
    toRaw,
    provide,
    onMounted,
    onUpdated,
    onUnmounted,
    toRefs, toRef, unref, watch
} from "vue";
import PhraseOWordUsage from "@/models/PhraseOWordUsage";
import {clearAndPushAll, keepIndentifiedSwapIn} from "@/utils/ArrayUtil";
import {Liju} from "@/dtos/YoudaoLijuPatternMarkingTemp";
import PhraseOWordPickMarkingSingleEntryView from "@/components/PhraseItComp/PhraseOWordPickMarkingSingleEntryView.vue";
import {getWords} from "@/utils/RegexUtils";
import {
    formsOutCssMapping,
    lijuContextEventProcessors, lijuContextSW,
    phraseOWordPickInputEventProvides
} from "@/components/constants";
import FormsCountsSelect from "@/components/FormsCountsSelect.vue";
import {globalContextSw, globalShortCutKeysEventCenter} from "@/constants/gConstants";
import FormCountTagNormal from "@/components/WordFormedTag/FormCountTagNormal.vue";
import HoverEventTest1 from "@/testCompGroupC/subTest/HoverEventTest1.vue";
import HoverEnlargable from "@/components/HoverEnlargable.vue";
import DraggableElTable from "@/components/DraggableElTable.vue";
import DraggableTest1 from "@/testCompGroupC/subTest/DraggableTest1.vue";
import RemarkHoverEnlargable from "@/components/RemarkHoverEnlargable.vue";
import Test8Comp from "@/testCompGroupC/Test8Comp.vue";
import IntegretedRichTextEditor from "@/components/IntegretedRichTextEditor.vue";
import SubPhraseTag from "@/components/PhraseItComp/SubPhraseTag.vue";


//thePhrase=>PhraseOWordUsage.PhraseOWord
let props = defineProps(["thePhraseOrWord", "editingCurrPhrases", "colorGroup", "mode"]);
let emits = defineEmits(["deletingThisPhrase", "endSubPhraseInputPicking"]);
let moreShowing = ref(true);
let editing = ref(false);


const size = ref(20)
let editingPhrase = ref(false);

let phraseOWordUsage = new PhraseOWordUsage();
let theLiju = new Liju(props.thePhraseOrWord.phraseOWordText, null)
phraseOWordUsage.liju = theLiju;
clearAndPushAll(phraseOWordUsage.pickedPhrasesOWords, props.thePhraseOrWord.subPhrases);
phraseOWordUsage.pickedPhrasesOWords.forEach(pickedPhraseOWord => pickedPhraseOWord.liju = theLiju);
phraseOWordUsage = reactive(phraseOWordUsage);

function endPhraseOWordIputPicking() {
    keepIndentifiedSwapIn(props.thePhraseOrWord.subPhrases, phraseOWordUsage.pickedPhrasesOWords, (inEle, fromEle) => {
        return fromEle.phraseOWordKeyIdxPair === inEle.phraseOWordKeyIdxPair;
    });

    emits("endSubPhraseInputPicking", props.thePhraseOrWord.phraseOWordKeyIdxPair);
    // console.log("11111");
}

function deleteTheRemark(idx){
  // console.log("to delete the remark,",idx);
  // [].splice(1,1)
  props.thePhraseOrWord.remarksAll?.splice(idx,1);
}

provide(phraseOWordPickInputEventProvides, {
    endPhraseOWordIputPicking,
    deleteTheRemark
});

let cptContaingWord = computed(() => {
    return getWords(props.thePhraseOrWord.phraseOWordText);
})
const sPhrDialogVisible = ref(false);

const styleObject = computed(() => {

    let result = {}
    if (props.colorGroup) {
        result = {
            "--tagbuttons-group-color-bg-color-hover-default": `var(--tagbuttons-group-color-bg-color-hover-` + props.colorGroup + `)`,
            "--tagbuttons-group-color-bg-color-active-default": `var(--tagbuttons-group-color-bg-color-active-` + props.colorGroup + `)`,
            "--tagbuttons-group-color-bg-color-normal-default": `var(--tagbuttons-group-color-bg-color-normal-` + props.colorGroup + `)`,
            "--tagbuttons-group-color-text-color-default": `var(--tagbuttons-group-color-text-color-` + props.colorGroup + `)`,
            "--tagbuttons-group-color-border-color-default": `var(--tagbuttons-group-color-border-color-` + props.colorGroup + `)`,
            "--tagbuttons-group-color-text-color-lighter1-default": `var(--tagbuttons-group-color-text-color-lighter1-` + props.colorGroup + `)`,
        }
    }

    if (props.mode === `word` && !cptCurrEditing.value) {
        result['width'] = '100%';
    }
    return result;
});

let formCountsSelected = ref([]);

function reInitFormCountsSelected() {
    clearAndPushAll(formCountsSelected.value, [...toRaw(props.thePhraseOrWord.selectedFormsCounts ? props.thePhraseOrWord.selectedFormsCounts : [])]);
}

reInitFormCountsSelected();


function confirmFormCountsSelected() {
    selectingFormsCounts.value = false;
    editingCurrPhrase.value = false;
    clearAndPushAll(props.thePhraseOrWord.selectedFormsCounts, formCountsSelected.value);
    lijuContextEventProcs?.wordFormsCountsSelectDoneThen?.(props.thePhraseOrWord.phraseOWordKeyIdxPair);
}

let selectingFormsCounts = ref(false);

let keyBoardMoveFocusingCurr = ref(false);
let editingCurrPhrase = ref(false);

let cptCurrEditing = computed(() => {
    // console.log("1111");
    return props.editingCurrPhrases > 0 || editingCurrPhrase.value;
})

function wordFormsCountsSelect() {
    // console.log("wordFormsCountsSelect invoked in,",props.thePhraseOrWord.phraseOWordText);

    if (props.thePhraseOrWord.wordOrPhrase === "word") {
        editingCurrPhrase.value = true;
        selectingFormsCounts.value = true;
    }
}

const lijuContextSWs = inject(lijuContextSW, undefined);

function keyBoardMoveFocusThis(prePhasesOWordsRef) {
    // console.log("props.expandingPhrasesAndWordsTags",props.expandingPhrasesAndWordsTags)

    if (!lijuContextSWs?.expandingPhrasesAndWordsTags) {
        return;
    }
    prePhasesOWordsRef?.keyBoardMoveFocusOutThis?.();
    keyBoardMoveFocusingCurr.value = true;
    // console.log("keyBoardMoveFocusingCurr in,",props.thePhraseOrWord.thuuid)
    // console.log("and keyBoardMoveFocusingCurr.value,",keyBoardMoveFocusingCurr.value)
    shortCutKeysEventCenter?.center.subscribe('Alt+q', wordFormsCountsSelect);
}

watch(selectingFormsCounts, (oldValue, newValue) => {
    console.log("selectingFormsCounts watched,", newValue, oldValue);
    if (newValue) {
        globelSw.anyIndividualIsEditing.value = globelSw.anyIndividualIsEditing.value + 1
    } else {
        globelSw.anyIndividualIsEditing.value = globelSw.anyIndividualIsEditing.value - 1
    }

})

watch(sPhrDialogVisible, (oldValue, newValue) => {
    console.log("sPhrDialogVisible watched,", newValue, oldValue);
    if (newValue) {
        globelSw.anyIndividualIsEditing.value = globelSw.anyIndividualIsEditing.value + 1
    } else {
        globelSw.anyIndividualIsEditing.value = globelSw.anyIndividualIsEditing.value - 1
    }

})


watch(lijuContextSWs?.expandingPhrasesAndWordsTags, newValue => {
    if (!newValue) {
        sPhrDialogVisible.value = false;
        selectingFormsCounts.value = false;
        editingCurrPhrase.value = false;
    }
})

function keyBoardMoveFocusOutThis() {
    keyBoardMoveFocusingCurr.value = false;
    editingCurrPhrase.value = false;
    shortCutKeysEventCenter?.center.unSubscribe('Alt+q', wordFormsCountsSelect);
}

function currSelectingFormsCounts() {
    editingCurrPhrase.value = true;
    selectingFormsCounts.value = true;
}

defineExpose({
    keyBoardMoveFocusThis,
    keyBoardMoveFocusOutThis,
    currSelectingFormsCounts,
});

let lijuContextEventProcs = inject(lijuContextEventProcessors, undefined);
const shortCutKeysEventCenter = inject(globalShortCutKeysEventCenter, undefined);
let classObj = reactive({focusable: keyBoardMoveFocusingCurr});

const globelSw = inject(globalContextSw, undefined);


const conceptsPopOverVisible = ref(false);
const conceptsPopOverTempVisible = ref(false);
const theConceptButtonRef = ref();
const theConceptPopOverRef = ref();
const rateValue = ref()
// const { popoverInstances, showPopover, hidePopover } = usePopover();

let phraseRemarkerVisible = ref(false);
let wordRemarkerVisible = ref(false);


// let remarksAll = ref([]);

onUpdated(() => {
    // console.log("PhraseTag updated");
    theConceptButtonRef?.value?.addEventListener("mouseenter", () => {
        conceptsPopOverTempVisible.value = true;
    });

    theConceptButtonRef?.value?.addEventListener("mouseleave", () => {
        conceptsPopOverTempVisible.value = false;
    });

    // console.log("theConceptPopOverRef,",theConceptPopOverRef?.value?.popperRef?.contentRef?.addEventListener);

    theConceptPopOverRef?.value?.popperRef?.contentRef?.addEventListener("mouseenter", () => {
        conceptsPopOverTempVisible.value = true;
    })

    theConceptPopOverRef?.value?.popperRef?.contentRef?.addEventListener("mouseleave", () => {
        conceptsPopOverTempVisible.value = false;
    })


})

onMounted(() => {
    // console.log("PhraseTag Mounted");
})

onUnmounted(() => {
    // console.log("PhraseTag unMounted");
});

const gridData = reactive([
      {
        id: 1,
        concept: '@@阻止',
        short: 'zz',
        rank: 1,
        rate: 1,
        remarks: ["1", "2"],
        pos: [
          {subId: "sub-1", text: 'resistant', remarks: []},
          {subId: "sub-2", text: "halt", remarks: []},
          {subId: "sub-3", text: "restraint", remarks: []},
          {subId: "sub-4", text: "check", remarks: []},
          {subId: "sub-5", text: "head off", remarks: []},
          {subId: "sub-6", text: "choke off", remarks: []},
          {subId: "sub-7", text: "pull the plug on", remarks: []},
        ],
        formsPos: [
          {
            form: "adj.",
            poses: [
              {subId: "sub-1-1", text: 'resistant', relevancyD:30,moreOfSense:'抵抗的，反抗的，顽固的',moreOfCoreConcepts:'@@抵抗,@@抵制,@@阻止',formCnt:'adj.2',tldRank:6760,tldFreq:3212,tldFormPerc:100,tldSensePerc:100,remarks: []},
              {subId: "sub-1-2", text: 'obstructive', relevancyD:70,moreOfSense:'阻碍，阻碍的，妨碍的',moreOfCoreConcepts:'@@妨碍,@@阻止,@@阻挠,@@阻塞',tldRank:21907,tldFreq:424,tldFormPerc:100,tldSensePerc:100,remarks: []},
            ]
          },{
            form: "n.",
            poses: [
              {subId: "sub-2-1", text: 'stop', relevancyD:30,moreOfSense:'停止，终止，停留',moreOfCoreConcepts:'@@结束,@@阻止,@@阻碍,@@停止,@@终止',tldRank:2396,tldFreq:15418,tldFormPerc:10.5,tldSensePerc:18,remarks: [],examples:``},
              {subId: "sub-2-2", text: 'frustration', relevancyD:20,moreOfSense:'挫折，失败',moreOfCoreConcepts:'@@沮丧,@@阻止,@@挫败',tldRank:3261,tldFreq:9787,tldFormPerc:100,tldSensePerc:100,remarks: [],examples:``},
              {subId: "sub-2-3", text: 'halt', relevancyD:60,moreOfSense:'停止，阻止，暂停',moreOfCoreConcepts:'@@阻止,@@停止,@@暂停',tldRank:7109,tldFreq:2959,tldFormPerc:61.9,tldSensePerc:3,remarks: [],examples:``},
              {subId: "sub-2-4", text: 'prohibition', relevancyD:45,moreOfSense:'禁止，禁令',moreOfCoreConcepts:'@@禁止,@@禁令,@@阻止',tldRank:6906,tldFreq:3191,tldFormPerc:100,tldSensePerc:100,remarks: [],examples:``},
              {subId: "sub-2-5", text: 'restraint', relevancyD:50,moreOfSense:'克制，抑制，约束',moreOfCoreConcepts:'@@控制,@@阻止,@@抑制,@@限制,@@克制,@@约束,@@制止',tldRank:5479,tldFreq:4571,tldFormPerc:100,tldSensePerc:100,remarks: [],examples:``},
            ]
          },{
            form: "v.",
            poses: [
              {subId: "sub-3-1", text: 'check', relevancyD:30,moreOfSense:'控制，抑制',moreOfCoreConcepts:'@@控制,@@阻止,@@抑制,@@克制,@@约束,@@检查,@@规定,@@查明',tldRank:12503,tldFreq:1162,tldFormPerc:2.1,tldSensePerc:18,remarks: [],examples:``},
              {subId: "sub-3-2",
                text: 'stop',
                relevancyD:90,
                moreOfSense:'',
                moreOfCoreConcepts:'',
                tldRank:329,
                tldFreq:131958,
                tldFormPerc:89.5,
                tldSensePerc:18,
                remarks: [],
                examples:`
                <p><span style="color: rgb(53, 152, 219);">[transitive]</span> to prevent somebody from doing something; to prevent something from happening阻止；阻碍；阻拦；防止</p>
                <ul>
                    <li><span style="color: rgb(80, 156, 158);"><span style="color: rgb(0, 0, 0);"><strong>stop somebody/something</strong></span> I want to go and you can't stop me.</span>我要走，你拦不住我。</li>
                    <li><span style="color: rgb(80, 156, 158);">efforts to stop the spread of the disease</span>努力阻止疾病传播</li>
                    <li><span style="color: rgb(80, 156, 158);"><strong>There's no stopping us now</strong> (= nothing can prevent us from achieving what we want to achieve).</span>现在什么都无法阻挡我们了。</li>
                    <li><span style="color: rgb(80, 156, 158);"><span style="color: rgb(0, 0, 0);"><strong>stop somebody/something (from) doing something</strong></span> You can't stop people (from) saying what they think.</span>人们怎么想就会怎么说，你阻止不了。</li>
                    <li><span style="color: rgb(80, 156, 158);">They <strong>tried to stop me </strong>from leaving.</span>他们尝试阻止我离开。</li>
                    <li><span style="color: rgb(80, 156, 158);"><strong>There's nothing to stop you</strong> from accepting the offer.</span>你尽可以接受那个提议。</li>
                </ul>`},
              {subId: "sub-3-3", text: 'bar', relevancyD:70,moreOfSense:'禁止，阻拦',moreOfCoreConcepts:'@@障碍,@@阻挡',tldRank:5164,tldFreq:5034,tldFormPerc:10.4,tldSensePerc:1,remarks: [],examples:``},
              {
                subId: "sub-3-4",
                text: 'prevent',
                relevancyD: 80,
                moreOfSense: '预防，挡住，阻止',
                moreOfCoreConcepts: '@@阻碍,@@阻止,@@阻挠',
                tldRank: 1084,
                tldFreq: 39527,
                tldFormPerc: 100,
                tldSensePerc: 100,
                rremarks: [],
                examples: `<p><span style="color: rgb(53, 152, 219);">[transitive]</span> to prevent somebody from doing something; to prevent something from happening阻止；阻碍；阻拦；防止1</p>`
              },
              {subId: "sub-3-5", text: 'arrest', relevancyD:85,moreOfSense:'',moreOfCoreConcepts:'',tldRank:2153,tldFreq:17710,tldFormPerc:60.9,tldSensePerc:100,remarks: [],examples:``},
              {subId: "sub-3-6", text: 'stem', relevancyD:85,moreOfSense:'',moreOfCoreConcepts:'',tldRank:4086,tldFreq:7221,tldFormPerc:42.6,tldSensePerc:100,remarks: [],examples:``},
            ]
          }
          ,{
            form: "phr.",
            poses: [
              {subId: "sub-4-1", text: 'head off',relevancyD:85,moreOfSense:'',moreOfCoreConcepts:'',tldRank:-1,tldFreq:-1,tldFormPerc:-1, tldSensePerc:18,remarks: [],examples:``},
              {subId: "sub-4-2", text: 'rule out',relevancyD:65,moreOfSense:'',moreOfCoreConcepts:'',tldRank:-1,tldFreq:-1,tldFormPerc:-1,tldSensePerc:18, remarks: [],examples:``},
              {subId: "sub-4-3", text: 'choke off',relevancyD:80,moreOfSense:'',moreOfCoreConcepts:'',tldRank:-1,tldFreq:-1,tldFormPerc:-1, tldSensePerc:18,remarks: [],examples:``},
              {subId: "sub-4-4", text: 'pull the plug on', relevancyD:75,moreOfSense:'',moreOfCoreConcepts:'',tldRank:-1,tldFreq:-1,tldFormPerc:-1,tldSensePerc:18,remarks: [],examples:``},
            ]
          }
        ]
      },
      {
        id: 2,
        concept: '@@阻挠',
        short: 'zn',
        rank: 1,
        rate: 1.5,
        remarks: [],
        pos: [
          {subId: "sub-1", text: 'word2', remarks: []},
          {subId: "sub-2", text: "of a phrase 2", remarks: []}
        ]
      },
      {
        id: 3,
        concept: '@@阻挡',
        short: 'zd',
        rank: 1,
        rate: 3,
        remarks: [],
        pos: []
      },
      {
        id: 4,
        concept: '@@阻碍',
        short: 'za',
        rank: 1,
        rate: 2,
        remarks: ['3', '4'],
        pos: []
      },
    ]
)

console.log("withIn PhraseTag thePhraseOrWord.relatedCoreConcepts:",props.thePhraseOrWord.relatedCoreConcepts);

const indexMethod = (index) => {
    return index * 2
}

let testStayEnlarged = ref(false);

// console.log("init PhraseTag with thePhraseOrWord:",props.thePhraseOrWord);

let testRemarksAll = ref([]);
</script>

<template>

  <!--    <div :class="{focusable:keyBoardMoveFocusingCurr}" @click="(e)=>{keyBoardMoveFocusThis();e.stopPropagation()}">-->
    <div :class="classObj" style="background-color: rgba(245,239,252,0.27);border-radius: 5px;padding: 1px;">
        <!--        keyBoardMoveFocusingCurr:{{keyBoardMoveFocusingCurr}}-->
        <!--        <br/>-->
        <!--        thuuid:{{thePhraseOrWord.thuuid}}-->
        <!--        <br/>-->
        <!--        {{formCountsSelected}}-->
        <div style="display: flex">
          <span class="tagbuttons-group" v-if="cptCurrEditing&&!selectingFormsCounts" :style="styleObject">
            <span v-if="mode===`phrase`" style="z-index: 50">
                <el-tag class="tagbuttons-ele">{{ thePhraseOrWord.phraseOWordText }}</el-tag>
                <button class="tagbuttons-ele" @click="emits(`deletingThisPhrase`,thePhraseOrWord)"> <el-icon><Close/></el-icon></button>
                <button v-if="cptContaingWord.length>2" class="tagbuttons-ele narrow" @click="sPhrDialogVisible = true"><el-icon><Plus/></el-icon>sPhr.</button>

                <el-popover placement="bottom-start" :width="`fit-content`" trigger="click" :visible="phraseRemarkerVisible">
                    <template #reference>
                        <button class="tagbuttons-ele narrow" @click="phraseRemarkerVisible=!phraseRemarkerVisible"><el-icon><Plus/></el-icon>Rmk.</button>
                    </template>
                    <div>
<!--                      theRemarksAll:{{thePhraseOrWord.remarksAll}}-->
                        <IntegretedRichTextEditor :thePopVisible="phraseRemarkerVisible" :remarksAll="thePhraseOrWord.remarksAll"></IntegretedRichTextEditor>
<!--                        <IntegretedRichTextEditor :thePopVisible="phraseRemarkerVisible" :remarksAll="testRemarksAll"></IntegretedRichTextEditor>-->
                    </div>
                </el-popover>
                <button class="tagbuttons-ele"><el-icon><Plus/></el-icon>@@</button>
            </span>
            <span v-else-if="mode===`word`">
<!--                {{selectingFormsCounts}}-->
                <!--                <br/>-->
                <el-tag class="tagbuttons-ele">{{ thePhraseOrWord.phraseOWordText }}</el-tag>
                <button class="tagbuttons-ele" @click="emits(`deletingThisPhrase`,thePhraseOrWord)"> <el-icon><Close/></el-icon></button>
                <button class="tagbuttons-ele narrow" @click="selectingFormsCounts = true"><el-icon><Plus/></el-icon>Fc.</button>

                <el-popover placement="bottom-start" :width="`fit-content`" trigger="click" :visible="wordRemarkerVisible">
                    <template #reference>
                        <button class="tagbuttons-ele narrow" @click="wordRemarkerVisible = !wordRemarkerVisible"><el-icon><Plus/></el-icon>Rmk.</button>
                    </template>
                    <div>
<!--                      theRemarksAll:{{thePhraseOrWord.remarksAll}}-->
                        <IntegretedRichTextEditor :thePopVisible="wordRemarkerVisible" :remarksAll="thePhraseOrWord.remarksAll"></IntegretedRichTextEditor>
<!--                        <IntegretedRichTextEditor :thePopVisible="wordRemarkerVisible" :remarksAll="testRemarksAll"></IntegretedRichTextEditor>-->
                    </div>
                </el-popover>
                <button class="tagbuttons-ele"><el-icon><Plus/></el-icon>@@</button>
                <!--                {{formCountsSelected}}-->
            </span>
          </span>
          <span v-else class="tagbuttons-group" :style="styleObject" style="width: 100%;z-index: 50">
            <el-tag class="tagbuttons-ele tag-single">{{ thePhraseOrWord.phraseOWordText }}</el-tag>

            <el-popover ref="theConceptPopOverRef" placement="bottom-start" :width="`fit-content`" trigger="click" :height="`fit-content`"
                        popper-class="compactPopover" :visible="conceptsPopOverVisible||conceptsPopOverTempVisible">
<!--            <el-popover placement="bottom-end" :width="500" trigger="click" popper-class="compactPopover">-->
              <template #reference>
                <button class="tagbuttons-ele narrow"
                        @click="()=>{conceptsPopOverVisible=!conceptsPopOverVisible;if(!conceptsPopOverVisible){conceptsPopOverTempVisible=false}}"
                        ref="theConceptButtonRef">@@</button>
              </template>
<!--                <DraggableElTable :gridData="thePhraseOrWord.relatedCoreConcepts"></DraggableElTable>-->
                <DraggableElTable :gridData="gridData"></DraggableElTable>
                <!--                <DraggableTest1></DraggableTest1>-->
              <div style="margin-top: 5px;vertical-align: top"><b style="vertical-align: top">@@:</b>
<!--                  <input type="text" style="width: 390px;"/>-->
<!--                  <br/>-->
                  <textarea style="width: 390px;height:100px;resize: none"></textarea>
              </div>

            </el-popover>
          </span>
        </div>

        <div v-if="selectingFormsCounts">
            <!--                    @cancelIt="selectingFormsCounts = false;clearAndPushAll(formCountsSelected,[]);editingCurrPhrase = false;"-->
            <FormsCountsSelect v-model="formCountsSelected"
                               @cancelIt="selectingFormsCounts = false;editingCurrPhrase = false;reInitFormCountsSelected();"
                               @confirmIt="confirmFormCountsSelected()"
                               style="width: 370px;">
            </FormsCountsSelect>
        </div>
<!--        <div class="subs" style="display: flex" :style="{'&#45;&#45;testIndex':$attrs.style[`zIndex`]}">-->
        <div class="subs" style="display: flex" >
            <div v-if="thePhraseOrWord.selectedFormsCounts&&thePhraseOrWord.selectedFormsCounts?.length>0">
                <!--          <HoverEnlargable style="&#45;&#45;aniToWidth:fit-content;&#45;&#45;aniToHeight:80px;" :style="{zIndex:parseInt($attrs[`z-index`])+1}">-->
<!--                <HoverEnlargable style="&#45;&#45;aniToWidth:fit-content;&#45;&#45;shrinkedWidth:30px;&#45;&#45;aniFromWidthType:&#45;&#45;aniToWidth;" :style="{zIndex:parseInt($attrs.style[`zIndex`])}">-->
                <HoverEnlargable style="--aniToWidth:fit-content;--shrinkedWidth:30px;--aniFromWidthType:--aniToWidth;">
                    <div v-for="(selectedFormCount,idx) in thePhraseOrWord.selectedFormsCounts"

                         :key="idx">
                        <FormCountTagNormal :label="selectedFormCount">
                        </FormCountTagNormal>
                    </div>
                </HoverEnlargable>
            </div>
            <div v-if="mode===`word`||(mode===`phrase`&&(!thePhraseOrWord.subPhrases||thePhraseOrWord.subPhrases?.length===0))" style="display: flex">
                <!--              <HoverEnlargable style="&#45;&#45;aniToWidth:200px;&#45;&#45;aniToHeight:fit-content;border:1px solid;&#45;&#45;shrinkedWidth:50px" :style="{zIndex:parseInt($attrs[`z-index`])-1}">-->
<!--                <RemarkHoverEnlargable :style="{zIndex:parseInt($attrs.style[`zIndex`])-1}">-->
              <RemarkHoverEnlargable v-for="(remark,idx) in thePhraseOrWord.remarksAll" :contentHtmlStr="remark" @deleteClicked="deleteTheRemark(idx)">
              </RemarkHoverEnlargable>
            </div>
        </div>

        <!--        @closed="()=>{if(globelSw.anyIndividualIsEditing.value>0){globelSw.anyIndividualIsEditing.value = globelSw.anyIndividualIsEditing.value - 1}}"-->
        <el-dialog v-model="sPhrDialogVisible"
                   :show-close="false"
                   width="500"
                   close-on-press-escape
                   class="sPhrDialog">
            <!--      <template #header="{ close, titleId, titleClass }">-->
            <!--        <div class="my-header">-->
            <!--          <h4 :id="titleId" :class="titleClass">This is a custom header!</h4>-->
            <!--          <el-button type="danger" @click="close">-->
            <!--            <el-icon class="el-icon&#45;&#45;left"><CircleCloseFilled /></el-icon>-->
            <!--            Close-->
            <!--          </el-button>-->
            <!--        </div>-->
            <!--      </template>-->
            <PhraseOWordPickMarkingSingleEntryView :thePhraseOWordUsage="phraseOWordUsage">
            </PhraseOWordPickMarkingSingleEntryView>
        </el-dialog>
        <div v-if="thePhraseOrWord.subPhrases&&thePhraseOrWord.subPhrases.length>0&&moreShowing" style="display: flex">
            <SubPhraseTag v-for="(subPhrase,idx) in thePhraseOrWord.subPhrases" :theSubPhrase="subPhrase" :cptCurrEditing="cptCurrEditing"></SubPhraseTag>

<!--            <span v-for="(subPhrase,idx) in thePhraseOrWord.subPhrases" style="display: flex">-->

<!--              <el-tag class="tagbuttons-ele tag-single small stickTop">-->
<!--                  {{ subPhrase.phraseOWordText }}-->
<!--              </el-tag>-->
<!--              <button v-if="cptCurrEditing" class="tagbuttons-ele button-single stickTop">-->
<!--                <el-icon>-->
<!--                    <Close/>-->
<!--                </el-icon>-->
<!--              </button>-->
<!--              <button v-if="cptCurrEditing" class="tagbuttons-ele button-single stickTop">-->
<!--                <el-icon><Plus/></el-icon>Rmk.-->
<!--              </button>-->
<!--            </span>-->
            <!--    <el-tag class="tagbuttons-ele tag-single small stickTop">previously arranged</el-tag>-->
            <!--    <el-tag class="tagbuttons-ele tag-single small stickTop">a series</el-tag>-->
            <button class="tagbuttons-ele button-single stickTop" @click="moreShowing = false">
                <el-icon>
                    <DArrowLeft/>
                </el-icon>
            </button>
            <RemarkHoverEnlargable v-for="(remark,idx) in thePhraseOrWord.remarksAll" :contentHtmlStr="remark" @deleteClicked="deleteTheRemark(idx)">
            </RemarkHoverEnlargable>
            <!--        <button class="tagbuttons-ele button-single more"><el-icon><More /></el-icon></button>-->
        </div>
        <div v-else-if="thePhraseOrWord.subPhrases&&thePhraseOrWord.subPhrases.length>0&&!moreShowing"
             style="display: flex">
            <button class="tagbuttons-ele button-single stickTop" @click="moreShowing = true">
                <el-icon>
                    <More/>
                </el-icon>
            </button>
            <RemarkHoverEnlargable v-for="(remark,idx) in thePhraseOrWord.remarksAll" :contentHtmlStr="remark" @deleteClicked="deleteTheRemark(idx)">
            </RemarkHoverEnlargable>
            <!--        <el-tag class="tagbuttons-ele tag-single small hide"></el-tag>-->
        </div>
    </div>
</template>

<style scoped>
:deep(.sPhrDialog .el-dialog__header) {
    display: none;
}

.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
}

.tagbuttons-ele.narrow {
    padding: 0 4px;
}

:global(:root) {
    --tagbuttons-group-color-bg-color-hover-group1: #ece7e1;
    --tagbuttons-group-color-bg-color-active-group1: #beae98;
    --tagbuttons-group-color-bg-color-normal-group1: #f9f4eb;
    --tagbuttons-group-color-bg-color-darker1-group1: #f5ebe2;
    --tagbuttons-group-color-bg-color-darker2-group1: #fdf6c5;
    --tagbuttons-group-color-text-color-group1: #cc5512;
    --tagbuttons-group-color-text-color-lighter1-group1: #d98152;
    --tagbuttons-group-color-border-color-group1: #d9cfc1;
    --tagbuttons-group-color-border-darker-color-group1: #d39e52;
    --tagbuttons-group-color-border-darker2-color-group1: #d39e52;

    --tagbuttons-group-color-bg-color-hover-group2: #e4ece1;
    --tagbuttons-group-color-bg-color-active-group2: #9cbe98;
    --tagbuttons-group-color-bg-color-normal-group2: #f0f9eb;
    --tagbuttons-group-color-text-color-group2: #459d15;
    --tagbuttons-group-color-text-color-lighter1-group2: #7ea16a;
    --tagbuttons-group-color-border-color-group2: #cad9c1;

    --tagbuttons-group-color-bg-color-hover-group3: #d9e4e7;
    --tagbuttons-group-color-bg-color-active-group3: #a0c3cb;
    --tagbuttons-group-color-bg-color-normal-group3: #e9f7fa;
    --tagbuttons-group-color-text-color-group3: #15849d;
    --tagbuttons-group-color-text-color-lighter1-group3: #53c1da;
    --tagbuttons-group-color-border-color-group3: #cadbe0;


    /*--tagbuttons-group-color-bg-color-hover-default:var(--tagbuttons-group-color-bg-color-hover-group2);*/
    /*--tagbuttons-group-color-bg-color-active-default:var(--tagbuttons-group-color-bg-color-active-group2);*/
    /*--tagbuttons-group-color-bg-color-normal-default:var(--tagbuttons-group-color-bg-color-normal-group2);*/
    /*--tagbuttons-group-color-text-color-default:var(--tagbuttons-group-color-text-color-group2);*/
    /*--tagbuttons-group-color-border-color-default:var(--tagbuttons-group-color-border-color-group2);*/

    --tagbuttons-group-color-bg-color-hover-default: var(--tagbuttons-group-color-bg-color-hover-group1);
    --tagbuttons-group-color-bg-color-active-default: var(--tagbuttons-group-color-bg-color-active-group1);
    --tagbuttons-group-color-bg-color-normal-default: var(--tagbuttons-group-color-bg-color-normal-group1);
    --tagbuttons-group-color-text-color-default: var(--tagbuttons-group-color-text-color-group1);
    --tagbuttons-group-color-border-color-default: var(--tagbuttons-group-color-border-color-group1);
    --tagbuttons-group-color-text-color-lighter1-default: var(--tagbuttons-group-color-text-color-lighter1-group1)
}

.tagbuttons-group :deep(.tagbuttons-ele):not(:first-child):not(:last-child) {
    border-radius: 0;
//border-left-color: rgba(255,255,255,0.5); //border-right-color: rgba(255,255,255,0.5); cursor: pointer;
}

.tagbuttons-group :deep(.tagbuttons-ele):not(:last-child) {
    margin-right: -1px;
}

.tagbuttons-group :deep(.tagbuttons-ele):not(:first-child) {
    background-color: #f5f7fa;
}

.tagbuttons-group :deep(.tagbuttons-ele):first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-color: rgba(255, 255, 255, 0.5);
//cursor: text; -webkit-user-select: text; -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    padding: 0px 9px;
    font-weight: 600;
}

.tagbuttons-group :deep(.tagbuttons-ele):last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    cursor: pointer;
//border-left-color: #a0cfff;
}

.tagbuttons-group :deep(.tagbuttons-ele):not(:first-child):hover {
    background-color: var(--tagbuttons-group-color-bg-color-hover-default);
    /*background-color: #ece7e1;*/
    /*color: #ffffff;*/

}

.tagbuttons-group :deep(.tagbuttons-ele):not(:first-child):active {
    background-color: var(--tagbuttons-group-color-bg-color-active-default);
    /*background-color: #beae98;*/
    /*color: #ffffff;*/
}

:deep(.tagbuttons-ele) {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
//cursor: pointer; color: var(--tagbuttons-group-color-text-color-default);
    /*color: #cc5512;*/
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    transition: .1s;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    -webkit-appearance: none;
    --el-button-bg-color: #ffffff;
    background-color: var(--tagbuttons-group-color-bg-color-normal-default);
    /*background-color: #f9f4eb;*/
    border: var(--el-border);
//border-color: var(--el-button-border-color); border-color: var(--tagbuttons-group-color-border-color-default);
    /*border-color: #d9cfc1;*/
    border-radius: 3px;
    padding: 0 9px;
    height: 24px;
    z-index: 2;
    position: relative;
    /*font-weight: 600;*/
    /*border: none;*/
}

:deep(.tagbuttons-ele.tag-single) {
    font-weight: 600;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

:deep(.tagbuttons-ele.stickTop) {
    border-top: none;
    top: -1px;
    position: relative;
    padding: 0 5px;
    z-index: 1;
}

:deep(.stickTop):not(:first-child):not(:last-child) {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

:deep(.stickTop):first-child {
    border-top-right-radius: 0;
}

:deep(.stickTop):last-child {
    border-top-left-radius: 0;
}

:deep(.tagbuttons-ele.tag-single.small) {
    /*--tagbuttons-group-color-bg-color-hover-default:var(--tagbuttons-group-color-bg-color-hover-default);*/
    /*--tagbuttons-group-color-bg-color-active-default:var(--tagbuttons-group-color-bg-color-active-default);*/
    /*--tagbuttons-group-color-bg-color-normal-default:var(--tagbuttons-group-color-bg-color-normal-default);*/
//--tagbuttons-group-color-text-color-default:var(--tagbuttons-group-color-text-color-group1); --tagbuttons-group-color-text-color-default: var(--tagbuttons-group-color-text-color-lighter1-default);
    /*--tagbuttons-group-color-border-color-default:var(--tagbuttons-group-color-border-color-default);*/
    z-index: 1;
    height: 20px;
    font-weight: 550;
    padding: 0 9px;
}

:deep(.tagbuttons-ele.button-single) {
    height: 20px;
    /*font-weight: 550;*/
    background-color: #f5f7fa;
}

:deep(.tagbuttons-ele.button-single):hover {
    background-color: var(--tagbuttons-group-color-bg-color-hover-default);
}

:deep(.tagbuttons-ele.button-single):active {
    background-color: var(--tagbuttons-group-color-bg-color-active-default);
}
</style>


<style scoped>
:deep(.el-rate) {
    --el-rate-icon-margin: 0px;
}

:global(.el-popover.el-popper.compactPopover) {
    padding: 5px
}

:global(.compactPopover .el-table .cell) {
    padding: 0 5px
}

:global(.compactPopover .el-table .el-table__cell) {
    padding: 2px 0
}

:global(.compactPopover .el-rate) {
    height: 20px
}

:global(.compactPopover .el-input-number.is-controls-right .el-input__wrapper) {
    padding-left: 3px;
    padding-right: 28px;
}

:global(.compactPopover .el-input) {
    width: 90px;
}

:global(.compactPopover .el-input-number--small) {
    width: 70px;
}
</style>